<!DOCTYPE html>
<html>
<head>
<title>jQuery WeUI</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">

<link rel="stylesheet" href="/static/weui/dist/lib/weui.min.css">
<link rel="stylesheet" href="/static/weui/dist/css/jquery-weui.css">
<link rel="stylesheet" href="/static/weui/dist/css/icon.css">
<style type="text/css">

.panel_head{
	height:6rem;
}
.head_block {
	width: 30%;
	height: 6rem;
	display: inline;
	float: left;
}

.head_block img {
	margin: 1rem;
	width: 4rem;
	height: 4rem;
}

.head_pd {
	width: 40%;
	height: 6rem;
	display: inline;
	float: left;
}

.head_agent {
	border-bottom: 1px solid #333333;
	padding-bottom: 0.4rem;
}

.head_pd h4 {
	margin-top: 2em;
	font-weight: 200;
}

.head_pd .icon {
	font-size: 16px;
	line-height: 40px;
	margin: 5px 3px;
	color: #18b4ed;
	-webkit-transition: font-size 0.25s ease-out 0s;
	-moz-transition: font-size 0.25s ease-out 0s;
	transition: font-size 0.25s ease-out 0s;
}

.head_card {
	width: 5rem;
	height: 5rem;
	border: 1px solid #333;
	text-align: center;
	margin: 0.5rem auto;
	vertical-align: middle;
}

.head_card p {
	height: 2rem;
	line-height: 2rem;
	vertical-align: middle;
}
</style>
</head>

<body ontouchstart>
	<header>
		<div class="weui_panel weui_panel_access panel_head">
			<div class="weui_panel_bd">
				<div class="weui_media_hd head_block">
					<img class="weui_media_appmsg_thumb" src="/static/img/avatar.png" />
				</div>
				<div class="weui_media_bd head_pd">
					<h4 class="weui_media_title">
						<span class="head_agent">代理号:<span id="agent_id">10001</span></span>
					</h4>
					<p class="weui_media_desc">
						<a href="#"><span class="icon icon-100"></span>个人资料</a>
					</p>
				</div>
				<div class="weui_media_bd head_block">
					<div class="head_card">
						<p>房卡</p>

						<p class="card_num" style="color: red">
							<span id="">100</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</header>

	<div class="weui-grids">
		<a href="buttons.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_button.png" alt="">
			</div>
			<p class="weui-grid__label">Button</p>
		</a> <a href="cell.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_cell.png" alt="">
			</div>
			<p class="weui-grid__label">List</p>
		</a> <a href="form.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_cell.png" alt="">
			</div>
			<p class="weui-grid__label">Form</p>
		</a> <a href="flex.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_cell.png" alt="">
			</div>
			<p class="weui-grid__label">Flex</p>
		</a> <a href="toast.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_toast.png" alt="">
			</div>
			<p class="weui-grid__label">Toast</p>
		</a> <a href="dialog.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_dialog.png" alt="">
			</div>
			<p class="weui-grid__label">Dialog</p>
		</a> <a href="progress.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_progress.png" alt="">
			</div>
			<p class="weui-grid__label">Progress</p>
		</a> <a href="msg.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_msg.png" alt="">
			</div>
			<p class="weui-grid__label">Msg</p>
		</a> <a href="article.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_article.png" alt="">
			</div>
			<p class="weui-grid__label">Article</p>
		</a> <a href="action-sheet.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_actionSheet.png" alt="">
			</div>
			<p class="weui-grid__label">ActionSheet</p>
		</a> <a href="icons.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_icons.png" alt="">
			</div>
			<p class="weui-grid__label">Icons</p>
		</a> <a href="panel.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_panel.png" alt="">
			</div>
			<p class="weui-grid__label">Panel</p>
		</a> <a href="navbar.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_tab.png" alt="">
			</div>
			<p class="weui-grid__label">Navbar</p>
		</a> <a href="tabbar.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_tab.png" alt="">
			</div>
			<p class="weui-grid__label">Tabbar</p>
		</a> <a href="searchbar.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_search_bar.png" alt="">
			</div>
			<p class="weui-grid__label">SearchBar</p>
		</a> <a href="toptip.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_msg.png" alt="">
			</div>
			<p class="weui-grid__label">Toptip</p>
		</a> <a href="loadmore.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Loadmore</p>
		</a> <a href="slider.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Slider</p>
		</a> <a href="uploader.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Uploader</p>
		</a> <a href="badge.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Badge</p>
		</a> <a href="footer.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Footer</p>
		</a> <a href="preview.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Preview</p>
		</a> <a href="gallery.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Gallery</p>
		</a> <a href="swipeout.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Swipeout</p>
		</a>
	</div>

	<div class="demos-header">
		<h2 class='demos-second-title'>拓展组件</h2>
		<p class='demos-sub-title'>jQuery WeUI 专属组件</p>
	</div>

	<div class="weui-grids">
		<a href="ptr.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_ptr.png" alt="">
			</div>
			<p class="weui-grid__label">下拉刷新</p>
		</a> <a href="infinite.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_up.png" alt="">
			</div>
			<p class="weui-grid__label">滚动加载</p>
		</a> <a href="picker.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_picker.png" alt="">
			</div>
			<p class="weui-grid__label">Picker</p>
		</a> <a href="calendar.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_calendar.png" alt="">
			</div>
			<p class="weui-grid__label">Calendar</p>
		</a> <a href="city-picker.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_city.png" alt="">
			</div>
			<p class="weui-grid__label">City Picker</p>
		</a> <a href="datetime-picker.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_datetime.png" alt="">
			</div>
			<p class="weui-grid__label">Datetime</p>
		</a> <a href="swiper.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_swiper.png" alt="">
			</div>
			<p class="weui-grid__label">Swiper</p>
		</a> <a href="noti.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_msg.png" alt="">
			</div>
			<p class="weui-grid__label">Notification</p>
		</a> <a href="select.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_select.png" alt="">
			</div>
			<p class="weui-grid__label">Select</p>
		</a> <a href="popup.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_panel.png" alt="">
			</div>
			<p class="weui-grid__label">Popup</p>
		</a> <a href="photo-browser.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_photo.png" alt="">
			</div>
			<p class="weui-grid__label">Photos</p>
		</a> <a href="count.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">Count</p>
		</a>
	</div>

	<div class="demos-header">
		<h2 class='demos-second-title'>模板</h2>
		<p class='demos-sub-title'>常见的页面模板</p>
	</div>

	<div class="weui-grids">
		<a href="tpl-shopping-cart.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">购物车</p>
		</a> <a href="tpl-chat.html" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<img src="/static/weui/dist/images/icon_nav_new.png" alt="">
			</div>
			<p class="weui-grid__label">聊天</p>
		</a>
	</div>

	<div class="weui-footer">
		<p class="weui-footer__links">
			<a href="http://jqweui.com" class="weui-footer__link">jQuery-WeUI
				首页</a>
		</p>
		<p class="weui-footer__text">Copyright © 2016 jqweui.io</p>
	</div>

	<style>
.weui-footer {
	margin: 25px 0 10px 0;
}
</style>


	<script src="/static/weui/dist/lib/jquery-2.1.4.js"></script>
	<script src="/static/weui/dist/lib/fastclick.js"></script>
	<script>
		$(function() {
			FastClick.attach(document.body);
		});
	</script>
	<script src="/static/weui/dist/js/jquery-weui.js"></script>

</body>

</html>
